<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1(){
            console.log("Hello World");
        }
        // window.onload = function(){
        //     document.getElementById("btn").onclick = function(){
        //         console.log("动态绑定的事件");
        //     }
        // }

        // 所有的jquery函数调用者必须是jquery对象
        // 所有的DOM函数调用者必须是DOM对象
        // DOM对象 --> jquery对象   $(DOM对象)
        // $(document).ready(function(){
        //     $("#btn").click(function(){
        //        console.log("这是通过jquery函数实现的动态绑定事件");
        //     });
        // });

        // 最终简化版
        $(function(){
            $("#btn").click(function(){
                console.log("这是通过jquery函数实现的动态绑定事件");
                // 获取标签体的内容
                console.log(document.getElementById("btn").innerHTML);
                // document.getElementById("btn").innerHTML = "DOM方式修改内容";
                // 将jquery对象转换成DOM对象
                console.log($("#btn")[0].innerHTML);
                console.log($("#btn").get(0).innerHTML);
                // html():表示获取标签体的内容,识别标签
                // html(value):表示为指定jquery对象所表示的元素重新赋予标签体的内容
                console.log($("#btn").html())
                // $("#btn").html("jquery方式修改内容");
                // 在js代码中,this始终表示的是DOM对象
                // jquery也属于js代码,在jquery函数中使用也表示DOM对象
                console.log(this.innerHTML);
                console.log($(this).html());
            });
        })
    </script>
</head>
<body>
<button onclick="f1()">静态绑定</button><br>
<button id="btn">动态绑定</button><br>
</body>
</html>